<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  <title>中午吃啥！</title>
  <style>
    h1 {
      width: 100%;
      text-align: center;
    }

    .el-dialog__body {
      padding: 30px 88px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>欢迎光临！</h1>
    <el-button type="primary" @click="showDialog">全部菜单</el-button>
    <span style="color: #aaa;" @click="showTableDialog">菜品不满意？我要自己加菜</span>

    <!-- 全部菜品表格 -->
    <el-dialog title="全部菜单" :visible.sync="TableDialogVisible" width="30%">
      <el-button type="primary" icon="el-icon-plus" @click="addFood">新增</el-button>
      <el-table :data="tableData" style="width: 100%;" stripe>
        <el-table-column prop="key" label="菜名">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TableDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>

    <!-- 新增菜品弹窗 -->
    <el-dialog title="新增菜品" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="菜名" prop="name">
          <el-input v-model.trim="form.name" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFoodSave">添 加</el-button>
      </div>
    </el-dialog>
    <!-- ------ -->

    <!-- 选菜 -->
    <el-dialog title="选菜" :visible.sync="dialogVisible" width="40%">
      <el-transfer :titles="['未选', '已选']" v-model="checkValue" :data="data">
      </el-transfer>
    </el-dialog>
    <!-- ---- -->
    <div style="padding: 20px 0;">
      <span style="font-size: 20px;font-weight: bold;">
        已选菜单:
      </span>
      <span style="margin:0 10px" v-for="(v,i) in checkValue" :key="i">{{v}}</span>
    </div>

    <div>
      <el-button type="primary" @click="start">选好了，开始摇号</el-button>
    </div>
    <h1 v-if="result">今天中午吃：<span style="color:red ;">{{result}}</span></h1>
  </div>






  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',   // 选择器
      data: {
        dialogVisible: false,
        TableDialogVisible: false,
        dialogFormVisible: false,
        tableData: [],
        form: {},
        data: [],
        checkValue: [],
        result: null,
        rules: {
          name: [
            { required: true, message: '请输入菜名', trigger: 'blur' }
          ]
        }
      },
      created () {
        if (localStorage.getItem('tableData')) {
          this.data = JSON.parse(localStorage.getItem('tableData'))
        }
      },
      methods: {
        showDialog () {
          this.dialogVisible = true;
        },
        showTableDialog () {
          this.tableData = this.data
          this.TableDialogVisible = true;
        },
        start () {
          if (this.checkValue.length > 1) {
            this.result=null
            const loading = this.$loading({
              lock: true,
              text: '正在摇号！',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
              loading.close();
              this.result = this.checkValue[Math.round(Math.random() * (this.checkValue.length - 1))]
            }, 2000);
          } else {
            this.$message.warning('请选择至少两种菜品！');
          }
        },
        handleEdit (i, v) {
          this.$message.warning('编辑功能暂未开放！');
        },
        handleDelete (i, v) {
          this.tableData.splice(i, 1)
        },
        save () {
          this.data = []
          this.data = this.tableData
          localStorage.setItem('tableData', JSON.stringify(this.tableData))
          this.TableDialogVisible = false;
        },
        addFood () {
          this.dialogFormVisible = true;
        },
        addFoodSave () {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.tableData.unshift({
                key: this.form.name,
                label: this.form.name,
              })
              this.dialogFormVisible = false;
            }
          });
        }
      }
    })
  </script>
</body>

</html>